Add a devtool for looking at users and their devices #30983

uhoreg · 2025-10-08T18:12:35Z

Adds a devtool that allows you to look at users and their devices, and shows information about them, including verification status.

Checklist

I have read through review guidelines and CONTRIBUTING.md.
Tests written for new code (and old code if feasible).
New or updated public/exported symbols have accurate TSDoc documentation.
Linter and other CI checks pass.
I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

richvdh

Generally, looks very nice. A few stylistic things.

richvdh · 2025-10-23T17:40:26Z

src/components/views/dialogs/devtools/Users.tsx

+ *
+ * By default, filters to only show joined users.
+ *
+ * If the `member` state is set, delegates to `User` to view a single user.


what is User? Should this be an {@link} ?

also: the talk of state seems like an implementation detail which does not belong in the doc-comment?

Suggested change

* If the `member` state is set, delegates to `User` to view a single user.

* Once the user chooses a specific member, delegates to {@link UserView} to view a single user.

richvdh · 2025-10-23T17:43:01Z

src/components/views/dialogs/devtools/Users.tsx

+/**
+ * Shows a list of users in the room, and allows selecting a user to view.
+ *
+ * By default, filters to only show joined users.


how does one override this default, as a user of the component?

richvdh · 2025-10-23T17:46:59Z

src/components/views/dialogs/devtools/Users.tsx

+/**
+ * Shows a single user to view, and allows selecting a device to view.
+ *
+ * If the `device` state is set, delegates to `Device` to show a single device.


as above, this needs attention

richvdh · 2025-10-23T17:48:31Z

src/components/views/dialogs/devtools/Users.tsx

+const UserView: React.FC<UserProps> = ({ member, onBack }) => {
+    const context = useContext(DevtoolsContext);
+    const crypto = context.room.client.getCrypto();
+    const verificationStatus = useAsyncMemo(


it would probably be helpful to add a comment documenting the type and possible values of verificationStatus, since it's not obvious at a glance

richvdh · 2025-10-23T17:56:31Z

src/components/views/dialogs/devtools/Users.tsx

+                        hideTooltip={true}
+                        status={E2EStatus.Verified}
+                        className="mx_E2EIcon_inline"
+                    />


I'm no react expert, but ... putting this into useAsyncMemo feels a bit cumbersome to me. Wouldn't it be more natural to just to do:

const verificationStatus = useAsyncMemo(async () => { return await crypto?.getUserVerificationStatus(member.userId); }, ... );

... and put the rest outside useAsyncMemo?

That's actually how I had it originally, but it all migrated into the useAsyncMemo. I don't remember the exact reasons. I think part of it was you'd end up checking if crypto is available twice (once with the crypto? inside the useAsyncMemo, and the once with an if verificationStatus == null outside). Another reason was that this way I could make it a const whereas if I put the rest outside, I'd need to create a variable, and then set the value in an if statement. Those are both pretty small reasons, so if the other way is a better match to the coding style of the rest of the app, then I can change it.

richvdh · 2025-10-23T17:58:39Z

src/components/views/dialogs/devtools/Users.tsx

+            const devices = await crypto?.getUserDeviceInfo([member.userId]);
+            return devices?.get(member.userId) ?? new Map();
+        },
+        [context],


Suggested change

[context],

[context, member],

richvdh · 2025-10-23T18:00:17Z

src/components/views/dialogs/devtools/Users.tsx

+        const _onBack = (): void => {
+            setMember(null);
+        };


I'd be inclined to inline this into the <UserView> invocation

I was copying from another file in the directory, but yeah, it's short enough that it can be inlined.

richvdh · 2025-10-23T18:05:43Z

src/i18n/strings/en_EN.json

+            "unverified": "Verification status: <E2EIcon /> Not signed by owner",
+            "verified": "Verification status: <E2EIcon /> Verified by cross-signing"
+        },
+        "devices": "Devices (%(count)s)",


we should probably say something to remind us that this is only devices with keys

Suggested change

"devices": "Devices (%(count)s)",

"devices": "Cryptographic devices (%(count)s)",

maybe? dunno

richvdh · 2025-10-23T18:09:43Z

src/components/views/dialogs/devtools/Users.tsx

+                );
+            }
+        },
+        [],


Suggested change

[],

[crypto, device],

richvdh · 2025-10-23T18:10:12Z

src/components/views/dialogs/devtools/Users.tsx

+                return _t("devtools|device_verification_status|unverified", {}, { E2EIcon: e2eIcon });
+            }
+        },
+        [],


Suggested change

[],

[crypto, device],

uhoreg added the T-Enhancement label Oct 8, 2025

github-actions bot deployed to Netlify October 8, 2025 18:15 View deployment

github-actions bot deployed to EndToEndTests October 8, 2025 18:26 View deployment

add devtool for viewing users and their devices

3a55af8

uhoreg force-pushed the devtool_user_tool branch from ed491d7 to 3a55af8 Compare October 8, 2025 18:50

github-actions bot deployed to Netlify October 8, 2025 18:53 View deployment

github-actions bot deployed to EndToEndTests October 8, 2025 19:06 View deployment

uhoreg marked this pull request as ready for review October 8, 2025 19:08

uhoreg requested a review from a team as a code owner October 8, 2025 19:08

uhoreg requested review from MidhunSureshR and florianduros October 8, 2025 19:08

github-actions bot deployed to Netlify October 9, 2025 14:09 View deployment

show number of devices

26cb5cb

uhoreg force-pushed the devtool_user_tool branch from fc12768 to 26cb5cb Compare October 9, 2025 14:15

github-actions bot deployed to Netlify October 9, 2025 14:19 View deployment

github-actions bot deployed to EndToEndTests October 9, 2025 14:31 View deployment

uhoreg requested review from a team and kaylendog and removed request for a team October 9, 2025 14:51

richvdh self-requested a review October 23, 2025 14:15

richvdh requested changes Oct 23, 2025

View reviewed changes

	* If the `member` state is set, delegates to `User` to view a single user.
	* Once the user chooses a specific member, delegates to {@link UserView} to view a single user.

	"devices": "Devices (%(count)s)",
	"devices": "Cryptographic devices (%(count)s)",

Uh oh!

Add a devtool for looking at users and their devices #30983

Are you sure you want to change the base?

Add a devtool for looking at users and their devices #30983

Conversation

uhoreg commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Uh oh!

richvdh left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

uhoreg commented Oct 8, 2025 •

edited

Loading